<template>
  <div class="permission-demo">
    <div class="page-header">
      <h1 class="page-title">权限控制演示</h1>
      <p class="page-description">展示不同角色和权限下的按钮显示效果</p>
    </div>

    <!-- 当前用户信息 -->
    <el-card class="user-info-card">
      <template #header>
        <div class="card-header">
          <span>当前用户信息</span>
        </div>
      </template>
      
      <div class="user-info">
        <div class="info-item">
          <span class="label">用户名：</span>
          <el-tag type="info">{{ authStore.userDisplayName }}</el-tag>
        </div>
        <div class="info-item">
          <span class="label">角色：</span>
          <el-tag :type="getRoleTagType(authStore.role)">
            {{ getRoleDisplayName(authStore.role) }}
          </el-tag>
        </div>
        <div class="info-item">
          <span class="label">权限：</span>
          <div class="permissions-list">
            <el-tag 
              v-for="permission in authStore.permissions" 
              :key="permission"
              size="small"
              class="permission-tag"
            >
              {{ getPermissionDisplayName(permission) }}
            </el-tag>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 按钮权限演示 -->
    <el-card class="button-demo-card">
      <template #header>
        <div class="card-header">
          <span>按钮权限控制演示</span>
        </div>
      </template>
      
      <div class="demo-section">
        <h3>使用 v-permission 指令</h3>
        <div class="button-group">
          <el-button 
            type="primary" 
            v-permission="'ticket:create'"
          >
            <el-icon><Plus /></el-icon>
            创建工单
          </el-button>
          
          <el-button 
            type="success" 
            v-permission="'ticket:update'"
          >
            <el-icon><Edit /></el-icon>
            编辑工单
          </el-button>
          
          <el-button 
            type="danger" 
            v-permission="'ticket:delete'"
          >
            <el-icon><Delete /></el-icon>
            删除工单
          </el-button>
          
          <el-button 
            type="warning" 
            v-permission="'ticket:assign'"
          >
            <el-icon><User /></el-icon>
            分配工单
          </el-button>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>使用 v-role 指令</h3>
        <div class="button-group">
          <el-button 
            type="primary" 
            v-role="'admin'"
          >
            <el-icon><Setting /></el-icon>
            系统设置
          </el-button>
          
          <el-button 
            type="success" 
            v-role="['admin', 'manager']"
          >
            <el-icon><UserFilled /></el-icon>
            用户管理
          </el-button>
          
          <el-button 
            type="info" 
            v-role="['admin', 'agent', 'manager']"
          >
            <el-icon><DataAnalysis /></el-icon>
            查看报表
          </el-button>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>使用 PermissionWrapper 组件</h3>
        <div class="button-group">
          <PermissionWrapper permission="user:manage">
            <el-button type="primary">
              <el-icon><UserFilled /></el-icon>
              用户管理
            </el-button>
          </PermissionWrapper>
          
          <PermissionWrapper permission="system:config">
            <el-button type="warning">
              <el-icon><Setting /></el-icon>
              系统配置
            </el-button>
          </PermissionWrapper>
          
          <PermissionWrapper role="admin">
            <el-button type="danger">
              <el-icon><Tools /></el-icon>
              角色管理
            </el-button>
          </PermissionWrapper>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>使用 PermissionButton 组件</h3>
        <div class="button-group">
          <PermissionButton 
            permission="notification:send"
            type="primary"
            @click="handleNotificationSend"
          >
            <el-icon><Bell /></el-icon>
            发送通知
          </PermissionButton>
          
          <PermissionButton 
            permission="file:upload"
            type="success"
            @click="handleFileUpload"
          >
            <el-icon><Upload /></el-icon>
            上传文件
          </PermissionButton>
          
          <PermissionButton 
            permission="report:view"
            type="info"
            @click="handleReportView"
          >
            <el-icon><DataAnalysis /></el-icon>
            查看报表
          </PermissionButton>
        </div>
      </div>
    </el-card>

    <!-- 表格权限演示 -->
    <el-card class="table-demo-card">
      <template #header>
        <div class="card-header">
          <span>表格列权限控制演示</span>
        </div>
      </template>
      
      <el-table :data="demoData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'ACTIVE' ? 'success' : 'danger'">
              {{ row.status === 'ACTIVE' ? '正常' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <PermissionTableColumn 
          prop="createdAt" 
          label="创建时间" 
          width="180"
          permission="ticket:read"
        />
        
        <PermissionTableColumn 
          prop="assignee" 
          label="负责人" 
          width="120"
          permission="ticket:assign"
        />
        
        <PermissionTableColumn 
          prop="priority" 
          label="优先级" 
          width="100"
          role="['admin', 'manager']"
        />
        
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button 
              type="primary" 
              size="small" 
              v-permission="'ticket:update'"
              @click="editItem(row)"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              v-permission="'ticket:delete'"
              @click="deleteItem(row)"
            >
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 权限说明 -->
    <el-card class="permission-guide-card">
      <template #header>
        <div class="card-header">
          <span>权限控制说明</span>
        </div>
      </template>
      
      <div class="guide-content">
        <h3>权限控制方式</h3>
        <ul>
          <li><strong>v-permission 指令：</strong>根据用户权限控制元素显示</li>
          <li><strong>v-role 指令：</strong>根据用户角色控制元素显示</li>
          <li><strong>PermissionWrapper 组件：</strong>包装组件，根据权限控制内容显示</li>
          <li><strong>PermissionButton 组件：</strong>权限按钮组件，自动处理权限检查</li>
          <li><strong>PermissionTableColumn 组件：</strong>权限表格列组件</li>
        </ul>
        
        <h3>角色权限说明</h3>
        <div class="role-permissions">
          <div v-for="role in rolePermissions" :key="role.name" class="role-item">
            <h4>{{ role.name }}</h4>
            <div class="permissions">
              <el-tag 
                v-for="permission in role.permissions" 
                :key="permission"
                size="small"
                class="permission-tag"
              >
                {{ getPermissionDisplayName(permission) }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useAuthStore, PERMISSIONS, ROLES } from '../store/auth'
import { PermissionWrapper, PermissionButton, PermissionTableColumn } from '../utils/permission'
import { ElMessage } from 'element-plus'
import { 
  Plus, 
  Edit, 
  Delete, 
  User, 
  Setting, 
  UserFilled, 
  DataAnalysis, 
  Tools, 
  Bell, 
  Upload 
} from '@element-plus/icons-vue'

export default {
  name: 'PermissionDemo',
  components: {
    PermissionWrapper,
    PermissionButton,
    PermissionTableColumn
  },
  setup() {
    const authStore = useAuthStore()
    
    // 演示数据
    const demoData = ref([
      {
        id: 1,
        title: '系统登录问题',
        status: 'ACTIVE',
        createdAt: '2024-01-01 10:00:00',
        assignee: '张三',
        priority: 'HIGH'
      },
      {
        id: 2,
        title: '数据导出功能',
        status: 'ACTIVE',
        createdAt: '2024-01-02 14:30:00',
        assignee: '李四',
        priority: 'MEDIUM'
      },
      {
        id: 3,
        title: '界面优化建议',
        status: 'DISABLED',
        createdAt: '2024-01-03 09:15:00',
        assignee: '王五',
        priority: 'LOW'
      }
    ])
    
    // 角色权限映射
    const rolePermissions = computed(() => {
      const rolePermissionMap = {
        admin: [
          PERMISSIONS.TICKET_READ,
          PERMISSIONS.TICKET_CREATE,
          PERMISSIONS.TICKET_UPDATE,
          PERMISSIONS.TICKET_DELETE,
          PERMISSIONS.TICKET_ASSIGN,
          PERMISSIONS.USER_MANAGE,
          PERMISSIONS.SYSTEM_CONFIG,
          PERMISSIONS.REPORT_VIEW,
          PERMISSIONS.NOTIFICATION_MANAGE,
          PERMISSIONS.NOTIFICATION_SEND,
          PERMISSIONS.FILE_UPLOAD,
          PERMISSIONS.FILE_DELETE,
          PERMISSIONS.FILE_MANAGE
        ],
        manager: [
          PERMISSIONS.TICKET_READ,
          PERMISSIONS.TICKET_CREATE,
          PERMISSIONS.TICKET_UPDATE,
          PERMISSIONS.TICKET_ASSIGN,
          PERMISSIONS.USER_MANAGE,
          PERMISSIONS.REPORT_VIEW,
          PERMISSIONS.NOTIFICATION_MANAGE,
          PERMISSIONS.NOTIFICATION_SEND,
          PERMISSIONS.FILE_UPLOAD,
          PERMISSIONS.FILE_DELETE,
          PERMISSIONS.FILE_MANAGE
        ],
        agent: [
          PERMISSIONS.TICKET_READ,
          PERMISSIONS.TICKET_CREATE,
          PERMISSIONS.TICKET_UPDATE,
          PERMISSIONS.TICKET_ASSIGN,
          PERMISSIONS.REPORT_VIEW,
          PERMISSIONS.NOTIFICATION_SEND,
          PERMISSIONS.FILE_UPLOAD
        ],
        customer: [
          PERMISSIONS.TICKET_READ,
          PERMISSIONS.TICKET_CREATE
        ]
      }
      
      return Object.entries(rolePermissionMap).map(([role, permissions]) => ({
        name: getRoleDisplayName(role),
        permissions
      }))
    })
    
    // 方法
    const getRoleTagType = (roleKey) => {
      const roleTypes = {
        admin: 'danger',
        manager: 'warning',
        agent: 'success',
        customer: 'info'
      }
      return roleTypes[roleKey] || 'info'
    }
    
    const getRoleDisplayName = (roleKey) => {
      const roleNames = {
        admin: '系统管理员',
        manager: '管理员',
        agent: '客服',
        customer: '客户'
      }
      return roleNames[roleKey] || roleKey
    }
    
    const getPermissionDisplayName = (permission) => {
      const permissionNames = {
        'ticket:read': '查看工单',
        'ticket:create': '创建工单',
        'ticket:update': '更新工单',
        'ticket:delete': '删除工单',
        'ticket:assign': '分配工单',
        'user:manage': '用户管理',
        'system:config': '系统配置',
        'report:view': '查看报表',
        'notification:manage': '通知管理',
        'notification:send': '发送通知',
        'file:upload': '上传文件',
        'file:delete': '删除文件',
        'file:manage': '文件管理'
      }
      return permissionNames[permission] || permission
    }
    
    const handleNotificationSend = () => {
      ElMessage.success('发送通知功能')
    }
    
    const handleFileUpload = () => {
      ElMessage.success('上传文件功能')
    }
    
    const handleReportView = () => {
      ElMessage.success('查看报表功能')
    }
    
    const editItem = (item) => {
      ElMessage.success(`编辑项目: ${item.title}`)
    }
    
    const deleteItem = (item) => {
      ElMessage.success(`删除项目: ${item.title}`)
    }
    
    return {
      authStore,
      demoData,
      rolePermissions,
      getRoleTagType,
      getRoleDisplayName,
      getPermissionDisplayName,
      handleNotificationSend,
      handleFileUpload,
      handleReportView,
      editItem,
      deleteItem
    }
  }
}
</script>

<style scoped>
.permission-demo {
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.page-description {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

.user-info-card,
.button-demo-card,
.table-demo-card,
.permission-guide-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--text-primary);
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.label {
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 80px;
}

.permissions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-tag {
  margin: 2px;
}

.demo-section {
  margin-bottom: 30px;
}

.demo-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.guide-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}

.guide-content ul {
  margin: 0 0 24px 0;
  padding-left: 20px;
}

.guide-content li {
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.role-permissions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.role-item h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.role-item .permissions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .permission-demo {
    padding: 16px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .button-group {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .button-group .el-button {
    width: 100%;
    max-width: 300px;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .label {
    min-width: auto;
  }
  
  .role-permissions {
    grid-template-columns: 1fr;
  }
}

/* 暗色主题适配 */
.dark .guide-content ul {
  color: var(--text-secondary);
}
</style>
